<template>
	<a-modal v-if="editVisible" open :centered="true" :mask-closable="false" width="416px" :title="'违规人员信息修改'" @cancel="closeModal">
		<div class="edit-content">
			<div class="label">违规人员</div>
			<a-select
				v-model:value="personValue"
				show-search
				style="width: 100%"
				placeholder="请选择"
				allow-clear
				:options="personList"
				:filter-option="false"
				@search="getPersonList"
			>
				<template #notFoundContent v-if="searching">
					<a-spin size="small"></a-spin>
				</template>
			</a-select>
			<div v-if="show" style="margin-top: 10px; color: red">请选择违规人员</div>
		</div>

		<template #footer>
			<a-button key="back" @click="closeModal">取消</a-button>
			<a-button key="submit" type="primary" :loading="loading" @click="handleOk">确认</a-button>
		</template>
	</a-modal>
</template>

<script lang="ts" setup>
import httpServe from '@/global-services/index';
import { message } from 'ant-design-vue';

const emits = defineEmits(['ok']);

const editVisible = ref(false);
const show = ref(false);
const detailId = ref();
const personValue = ref();
const personList = ref<any[]>([]);
const searching = ref(false);
const getPersonList = async (searchVal: string) => {
	personList.value = [];
	searching.value = true;
	const res: any = await httpServe.getHttp('/base/zelo/user/list')(!searchVal ? {} : { name: searchVal });
	if (res.code === 0) {
		personList.value = res.data.map((i: any) => {
			return { label: `${i.name}(${i.phone})`, value: i.id };
		});
	}
	searching.value = false;
	console.log('getPersonList', JSON.parse(JSON.stringify(personList.value)));
};

const closeModal = () => {
	detailId.value = '';
	personValue.value = '';
	personList.value = [];
	editVisible.value = false;
};

const loading = ref(false);
const handleOk = async () => {
	if (!personValue.value) {
		show.value = true;
		return false;
	}

	const res: TsRes = await httpServe.postHttp('/base/warning-details/update')({ zeloUserId: personValue.value, detailId: detailId.value });
	if (res.code === 0) {
		message.success('人员信息修改成功');
		closeModal();
		emits('ok');
	}
};

const openModal = (recordId: any) => {
	editVisible.value = true;
	detailId.value = recordId;
	getPersonList('');
};
defineExpose({
	openModal
});
</script>

<style lang="less" scoped>
.edit-content {
	padding: 40px;

	.label {
		margin-bottom: 8px;
		line-height: 22px;
		color: @text02;
	}
}
</style>
